import {useState} from "react";
import {Image, View, Text} from "@tarojs/components";
import Taro, {useLoad, useDidShow} from '@tarojs/taro'
import './index.scss'
import Camera from '../../components/svg/camera.svg'
import MapPin from "../../components/svg/map-pin2.svg";
import Building from "../../components/svg/building-2.svg";
import Pen from "../../components/svg/pen.svg";
import Users from "../../components/svg/users2.svg";
import Users3 from "../../components/svg/users3.svg";
import UserCog from "../../components/svg/user-cog.svg";
import Medal from "../../components/svg/medal.svg";
import History from "../../components/svg/history.svg";
import RightArrow from "../../components/svg/chevron-right.svg";
import {getRequest, putRequest, uploadFile} from "../../util/request";

export default function Index() {

  const [userinfo, setUserInfo] = useState<any>({});
  const [trainList, setTrainList] = useState<any>([]);

  useLoad(() => {
    console.log('我的页面加载')
    queryUserInfo()
  })

  useDidShow(() => {
    queryUserInfo()
  })

  const gotoPage = (page) => {
    Taro.navigateTo({url: `${page}`});
  }

  const gotoDetailPage = (id) => {
    console.log('gotoDetailPage',id)
    Taro.navigateTo({url: `/pages/traindetail/index?trainId=${id}`});
  }

  const queryUserInfo = () => {
    getRequest(`/sysUser/info`, (res) => {
      setUserInfo(res.data)
      setTrainList(res.data.recentActivity.map(item => {
        return {
          id: item.id,
          name: item.title,
          date: item.crtTime,
        }
      }))
    })
  }

  const chooserImage = () => {
    Taro.chooseImage({
      count: 1, success: (res) => {
        console.log('chooserImage', res)
        uploadFile(res.tempFilePaths[0], 0, (res1) => {
          console.log('uploadFile', res1)
          const file = JSON.parse(res1.data)
          console.log('json', file)
          putRequest(`/sysUser/avatar`, {
            avatarId: file.data.id,
            avatarUrl: file.data.url
          }, (res2) => {
            if (res2.success) {
              Taro.showToast({title: '头像上传成功', icon: 'none'})
              queryUserInfo()
            }
          })
        })
      }
    })
  }

  return (
    <View className=''>
      <View className='top'>
        <View className='circle-avatar'>
          <Image src={userinfo.avatarUrl} className='avatar' />
        </View>
        <View className='camera' onClick={chooserImage}>
          <Image src={Camera} className='avatar1' />
        </View>
        <View className='name'>{userinfo.realname}</View>
        <View className='signature'>{userinfo.signature?userinfo.signature:'暂无签名'}</View>
        <View className='position'><Image src={MapPin} className='map-pin' />{userinfo.team?.areaName}</View>
        <View className='team'><Image src={Building} className='map-pin' />{userinfo.team?.name}</View>
        <View className='edit' onClick={() => {
          Taro.navigateTo({url: `/pages/personinfo/index?phone=${userinfo.phone}&signature=${userinfo.signature}&birthday=${userinfo.birthday?.substring(0,10)}`});
        }}
        ><Image src={Pen} className='map-pin' /></View>
      </View>
      <View className='container'>
        <View className='view view-top-left' onClick={() => {
          gotoPage('/pages/mytrain/index')
        }}
        >
          <View className='icon-view bgcolor1'>
            <Image src={Users} className='icon4' />
          </View>
          <View className='text-view'>
            我参加的训练<Text className='text2'>{userinfo.count1}</Text>
          </View>
        </View>
        <View className='view view-top-right' onClick={() => {
          gotoPage('/pages/myorgtrain/index')
        }}
        >
          <View className='icon-view bgcolor2'>
            <Image src={UserCog} className='icon4' />
          </View>
          <View className='text-view'>
            我组织的训练<Text className='text2'>{userinfo.count3}</Text>
          </View>
        </View>
        <View className='view view-bottom-left' onClick={() => {
          gotoPage('/pages/medal/index')
        }}
        >
          <View className='icon-view bgcolor3'>
            <Image src={Medal} className='icon4' />
          </View>
          <View className='text-view'>
            我的勋章<Text className='text2'>{userinfo.count2}</Text>
          </View>
        </View>
        <View className='view view-bottom-right' onClick={() => {
          gotoPage('/pages/history/index')
        }}
        >
          <View className='icon-view bgcolor4'>
            <Image src={History} className='icon4' />
          </View>
          <View className='text-view'>
            我的浏览记录<Text className='text2'>{userinfo.count4}</Text>
          </View>
        </View>
      </View>
      <View className='activity'>
        <View className='activity-title'>最近活动</View>
        {trainList.map((item) => (
          <View className='activity-view' key={item.id} onClick={() => gotoDetailPage(item.id)}>
            <View className='img-view'>
              <Image src={Users3} className='activity-img' />
            </View>
            <View className='titlename'>{item.name}</View>
            <View className='activitydate'>{item.date}</View>
            <View className='right-arrow'>
              <Image src={RightArrow} className='activity-img' />
            </View>
          </View>
        ))}
      </View>
      <View className='page-bottom'></View>
    </View>
  )
}
